
/* Variaveis */
$preto: #333;
$cinza: #c9c9c9;
$f14: 0.875em;
$laranja: #fbaf5d;

$ff:'Source Sans Pro', 'sans-serif';
$fa: 'FontAwesome';

//acima de 1600
@media screen and (max-width: 1600px){
	body{
		// background: lime
	}
}
//acima de 1366
@media screen and (max-width: 1366px){
	body{
		// background: green
	}
}

//acima de 1200
@media screen and (max-width: 1200px){
	body{
		// background: navy
	}
	
	.social{
		width: 108px;
		p{
			display: none;
		}
	}
}


//acima de 1080
@media screen and (max-width: 1080px){
	body{
		// background: blue
	}
	.menu ul li a{
		padding: 28px 10px;
	}
}
//acima de 900
@media screen and (max-width: 900px){
	body{
		// background: yellow;
		padding-top: 137px;
	}
	.header{
		height: 137px;
		.content{
			width: 100%;
		}
		.logo{
			margin-left: 20px;
		}
		.social{
			margin-right: 20px;
			border-left: none;
		}
	}
	.menu{
		// border-top: 1px solid $cinza;
		width: 100%;
		height: 50px;
		clear: both;
		background: $preto;
		text-align: center;
		margin-top: -10px;
		ul{
			float: left;
			width: 100%;
			li{
				float: none;
				display: inline-block; 
				a{
					border: none; 
				}
			}
		}
	}
	.faleConosco{
		width: 80%;
	}
}

//acima de 680
@media screen and (max-width: 680px){
	body{
		// background: orange;
		padding-top: 100px;
	}

	.menu{
		display: none;
		float: left;
		width: 100%;
		ul{
			width: 100%;
			background: $preto;
			li{
				width: 100%;
				a{
					width: 100%;
				}
			}
		}
	}
	.header{
		height: 100px;
	}
	.logo{
		width: 100%;
		text-align: center;
		figure{
			display: inline-block;
			float: none!important;
		}
	}
	.social{
		float: left;
		margin-top: -10px;
		padding-left: 8px;
		margin-top: -30px;
	}
	.btMenu{
		display: block;
		top: 21px;
	}
	.menu{
		margin-top: -20px;
	}

	.hrow{
		width: 100%;
	}
	.menuRodape{
		display: none;
	}
	.informacoes{
		width: 100%;
		text-align: center;
		li{
			padding: 2%;
			i{
				float: none;
				height: 20px;
				margin: 0 auto;
				width: 20px;
			}
			p{
				float: none;
			}
		}
	}
	.socialRodape {
		border: medium none;
		float: none;
		width: 120px;
		margin: 0 auto;
		ul{
			padding: 20px 0;
			float: left;
			li{
				a{
					margin: 6px!important;
				}
			}
		}
	}
	.empresa{
		width: 96%;
		margin-left: 2%;
	}
	.galeriaEmpresa{
		width: 98%;
	}


	.fundadorImg{
		float: none;
		margin: 0 auto;
	}
	.txtFundador{
		width: 92%;
		text-align: center;
	}
	.chargeImg{
		position: relative;
		float: none;
		width: 80%;
		margin: 20px auto;
	}
	.charges{
		padding: 80px 0;
	}
	.charges .content .txtFundador{
		float: none;
	}

	.count{
		display: none;
	}
	.textoPaginacao{
		right: 0;
		width: 100%;
		text-align: center;
	}

	.owlTelas .owl-buttons .owl-prev, .owlTelas .owl-buttons .owl-next{
		display: none;
	} 

	.txtPerguntas{
		width: 90%;
	}
	.hrowLeft{
		width: 100%;
	}
	.hrowRight{
		width: 100%;
	}
	.owlMaisFotos {
		display: none;
		.owl-buttons{
			display: none;
		}
	}

	.thumbsGaleria{
		display: none;
	}
	.voltarProdutos{
		top:0;
		right: auto;
		left: 20%;
	}
	.contentTextoProd{
		width: 100%;
		margin-left: 0;
	}
}



//acima de 480
@media screen and (max-width: 480px){
	body{
		// background: red;
		padding-top: 60px;
	}
	.content{
		width: 98%;
	}
	.social{
		display: none;
	}
	.header{
		height: 60px;
	}
	.titDestaque{
		font-size: 22px;
	}
	.slider .owl-controls{
		display: none;
		visibility: hidden;
	}
	.likebox{
		display: none!important;
	}
	.fimFooter{
		height: auto;
		.rights{
			width: 100%;
			text-align: center;
			float: none;
		}
	}
	.noiatec{
		float: none;
		margin: 20px auto;
	}
	
	.header .logo{
		float: left;
		width: 200px;
		height: 60px;
		margin: 10px 10px 10px -30px
	}



	.bannerEmpresa{
		figcaption{
			font-size: 24px;	
		}
	}
	.textoPaginacao{
		top: 0;
		right: 0;
		width: 100%;
		text-align: center;
		font-size: 14px;
	}
	.owlTelas .owl-controls{
		display: block;
		visibility: visible;
	}
	.faleConosco{
		width: 90%;
	}
	.menuProd{
		width: 100%;
		height: auto;
		padding-bottom: 20px;
		li{
			width: 96%;
			border:none;
			float: left;
			padding:2%;
			a{
				text-align: center;
				float: left;
				width: 100%;
				border-bottom:2px solid transparent;
				&:hover{
					border-bottom:2px solid $laranja;
				}
			}
		}
	}
	
}
